<!--
* @name: G6树状脑图
* @author: DuanYiPeng
* @date: 2020-07-23
-->
<template>
    <div
        id="g6TreeNode"
        ref="g6TreeNode"
        :style="'width:'+width+';height: '+height"></div>
</template>
<script>
    import G6 from '@antv/g6';
    export default {
        name: "g6Tree",
        props: {
            width:{
                type:String,
                default:'100%'
            },
            height:{
                type:String,
                default:'100%'
            },
            treeData:{
                type:Object,
                default:() => {
                    return {}
                }
            }
        },
        data() {
            return {}
        },
        created() {
        },
        mounted() {
        },
        computed: {},
        methods: {
            initG6(){
                let g6TreeNode = this.$refs.g6TreeNode;
                let width = g6TreeNode.scrollWidth;
                let height = g6TreeNode.scrollHeight;
                const treeGraph = new G6.TreeGraph({
                    container: 'g6TreeNode',
                    width,
                    height,
                    modes: {
                        default: [
                            {
                                type: 'collapse-expand',
                                onChange: function onChange(item, collapsed) {
                                    const data = item.get('model').data;
                                    data.collapsed = collapsed;
                                    return true;
                                },
                            },
                            'drag-canvas',
                            'zoom-canvas',
                        ],
                    },
                    defaultNode: {
                        size: 16,
                        anchorPoints: [
                            [0, 0.5],
                            [1, 0.5],
                        ],
                        style: {
                            fill: '#C6E5FF',
                            stroke: '#5B8FF9',
                        },
                    },
                    defaultEdge: {
                        type: 'cubic-horizontal',
                        style: {
                            stroke: '#A3B1BF',
                        },
                    },
                    layout: {
                        type: 'mindmap',
                        direction: 'H',
                        getHeight: () => {
                            return 16;
                        },
                        getWidth: () => {
                            return 10;
                        },
                        getVGap: () => {
                            return 10;
                        },
                        getHGap: () => {
                            return 100;
                        },

                    },
                });
                let centerX = 0;
                treeGraph.node(function(node) {
                    if (node.id === '文章') {
                        centerX = node.x;
                    }

                    return {
                        label: node.name,
                        labelCfg: {
                            style:{
                                fill:'#fff',
                            },
                            position:
                                node.children && node.children.length > 0
                                    ? 'right'
                                    : node.x > centerX
                                    ? 'right'
                                    : 'left',
                            offset: 5,
                        },
                    };
                });
                // 为图上的所有节点绑定点击监听
                treeGraph.on('node:click', evt => {
                    // const item = evt.item; // 被操作的节点 item
                    // const target = evt.target; // 被操作的具体图形
                });
                treeGraph.data(this.treeData);
                treeGraph.render();
                treeGraph.fitView();
            }
        },
    }
</script>
<style scoped lang='scss'>

</style>
